<template>
  <el-dialog
    :close-on-click-modal="false"
    custom-class="second-dialog"
    title="请选择组织"
    v-model="visibleDialog"
  >
    <el-input v-model="search" placeholder="输入关键词搜索(2个字符起)" @input="searchDept" />
    <div v-if="search === null" class="link-list">
      <span @click="jeepTo(null, -1)">组织架构</span>
      <span
        v-for="(item, index) in parents"
        :key="index"
        @click="jeepTo(item.id, index)"
      >
        {{ item.name }}
      </span>
    </div>
    <div v-else class="link-list">
      <span class="first-link" @click="jeepTo(null, -1)">回到第一级</span>
    </div>
    <div v-loading="loading" class="cascader-panel-bg">
      <el-radio-group v-model="deptId">
        <ul class="list-ul">
          <li v-for="(item, index) in cascaderOption" :key="index">
            <el-radio :label="item.id">{{ item.name }}</el-radio>
            <a
              v-if="!item.noChildren"
              class="next"
              @click="next(item, index)"
            >
            下一级
            </a>
          </li>
        </ul>
      </el-radio-group>
      <div
        v-if="cascaderOption.length === 0"
        style="text-align: center; margin-top: 20%"
      >
        无相关内容
      </div>
    </div>
    <div class="result-area">
      当前部门: <span>{{ detailInfo.name }}</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visibleDialog = false"> 取消 </el-button>
        <el-button type="primary" @click="changeDept"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { getOrgTree } from "@/api/system";
export default {
  name: "DeptSelect",
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    nav: {
      type: Array,
      default: () => [],
    },
    dept: {
      type: String,
      default: null,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cascaderOption: [],
      loading: false,
      search: null,
      parentId: null
    };
  },
  emits: ["update:visible", "save-select", "update:info", "update:nav"],
  computed: {
    visibleDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    deptId: {
      get() {
        return this.dept;
      },
      set(val) {
        this.$emit("save-select", val);
      },
    },
    detailInfo: {
      get() {
        return this.info;
      },
      set(val) {
        this.$emit("update:info", val);
      },
    },
    parents: {
      get() {
        return this.nav;
      },
      set(val) {
        this.$emit("update:nav", val);
      },
    },
  },
  created() {
    if (this.nav.length > 0) {
      const item = this.nav[this.nav.length - 1];
      this.getList(item.id);
    } else {
      this.getList(null);
    }
  },
  methods: {
    changeDept() {
      this.visibleDialog = false;
    },
    // close(done) {
    //   this.$emit('close-dailog', false)
    //   done()
    // },
    resFun(response) {
      this.loading = false;
      const { status, data } = response;
      if (status === 200) {
        this.cascaderOption = data;
      } else {
        this.cascaderOption = [];
      }
    },
    // 点击导航跳到某一级
    jeepTo(id, index) {
      this.parentId = id;
      this.getList(id );
      this.parents = index === -1 ? [] : this.parents.slice(0, index + 1);
      this.search = null;
    },
    // 下一级
    next(item, index) {
      // this.detailInfo = { ...item };
      this.parents.push({ ...item })
      this.getList(item.id);
    },
    // 获取列表
    async getList(value) {
      this.parentId = value;
      this.loading = true;
      const response = await getOrgTree({ parentId: value });
      this.loading = false;
      const { status, data } = response;
      if (status === 200) {
        const I = this.cascaderOption.findIndex((item) => item.id === value);
        if (data.length > 0) {
          this.cascaderOption = data;
        } else {
          this.cascaderOption[I].noChildren = true;
        }
      } else {
        this.cascaderOption = [];
      }
    },
    searchDept(value) {
      if (value.length > 1) {
        this.loading = true;
        getOrgTree({ name: value, parentId: this.parentId })
          .then(this.resFun)
          .catch(() => {
            this.cascaderOption = [];
            this.loading = false;
          });
      }
    },
  },
};
</script>
<style lang="scss">
.cascader-panel-bg {
  overflow-y: auto;
  height: 350px;
  background: #fff;
}
.el-radio-group {
  width: 100%;
}
.list-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  padding: 10px 20px;
  li {
    list-style: none;
    padding: 0 10px;
    border-bottom: 1px dashed #dedede;
    padding-right: 50px;
    position: relative;
    .el-radio {
      width: calc(100% - 50px);
      height: 36px;
    }
    .next {
      position: absolute;
      top: 4px;
      right: 10px;
      display: inline-block;
      color: #3285ff;
      font-size: 12px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.link-list {
  margin: 10px 0;
  span {
    display: inline-block;
    padding-right: 5px;
    color: #3285ff;
    & + span {
      &:before {
        content: "/";
        color: #606266;
        cursor: default;
      }
    }
    &:last-child {
      color: #333;
      cursor: default;
      &:hover {
        cursor: default;
        color: #333;
      }
    }
    &.first-link {
      color: #3285ff;
      cursor: pointer;
      &:hover {
        cursor: pointer;
        color: #3285ff;
      }
    }
    &:hover {
      cursor: pointer;
      color: #3285ff;
    }
  }
}
.result-area {
  text-align: right;
  margin-top: 10px;
}
</style>
